<template>
  <div class="main" ref="ref_main" v-if="isShow">
    <div style="box-shadow: 0 0 10px #00000026">
<!--      <color-picker-->
<!--          :pureColor="pureColor"-->
<!--          :isWidget="isShow"-->
<!--          :disableHistory="true"-->
<!--          :pickerType="pickerType"-->
<!--          format="hex"-->
<!--          :zIndex="1"-->
<!--          :disableAlpha="disableAlpha"-->
<!--          @pureColorChange="handle_pureColorChange"-->
<!--      />-->
      <color-picker
          :pureColor="pureColor"
          :isWidget="isShow"
          :disableHistory="false"
          format="hex"
          :zIndex="1"
          @pureColorChange="handle_pureColorChange"
      />
      <div
          style="
                    text-align: right;
                    padding: 0 16px 10px 16px;
                    background-color: white;
                "
      >
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button @click="isShowColorPicker(false)">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';

const pureColor = ref('#71afe5');
const isShow = ref(false);
const ref_main = ref();

// 点击选择器外面会自动关闭选择器
const isFirstOpen = ref(false);
onMounted(() => {
  document.addEventListener('click', (e) => {
    if (!ref_main.value?.contains(e.target) && !isFirstOpen.value) {
      isShow.value = false;
    }
    isFirstOpen.value = false;
  });
});

const props = defineProps({
  color: { type: String, default: '' },
  pickerType: { type: String, default: 'fk' }, //fk 、chrome
  disableAlpha: { type: Boolean, default: true },
});
//  初始化颜色
pureColor.value = props.color;
watch(
    () => props.color,
    () => {
      pureColor.value = props.color;
    },
);

// 设置颜色选择器面板显隐
const isShowColorPicker = (data = false) => {
  isShow.value = data;
  isFirstOpen.value = true;
};
// 颜色变化事件
const handle_pureColorChange = (e) => {
  // console.log(e)
  pureColor.value = e;
};

// 定义确定事件
const emit = defineEmits(['confirm']);
// 确定颜色
const confirm = () => {
  isShow.value = false;
  emit('confirm', pureColor.value);
};

// 暴露方法出去
defineExpose({
  isShowColorPicker,
  confirm,
});
</script>
<style lang="scss" scoped>
.main {
  position: absolute;
  z-index: 9999;
  left: 60%;
  top: 20%;

  :deep(.vc-colorpicker) {
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }
  :deep(.vc-color-wrap) {
    width: 0;
  }
}
</style>